<template>
  <view class="content">
    <view class="message-list">
      <wkiwi-swipe-action :options="options" :messagesList="messages"></wkiwi-swipe-action>
    </view>
  </view>
</template>

<script>
import wkiwiSwipeAction from "../../components/masslist/wkiwi-swipe-action.vue";
export default {
  components: { wkiwiSwipeAction },
  data() {
    return {
      focus: false,
      isShowView: true,
      options: [
        {
          text: "置顶",
          style: {
            backgroundColor: "#C7C6CD"
          }
        },
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d"
          }
        }
      ],
      messages: [{
          title: "马云",
          url: [
            "http://img1.3lian.com/gif/more/11/201212/0d1252b54be4f2d240b6b7fe4ed35054.jpg"
          ],
          message: "什么鬼，我有支付宝[禁止滑动]",
          time: "15:15",
          count: 5,
          stick: false, //是否为置顶状态
          disabled: true, //是否禁止滑动
          type: 2 //普通用户类型消息
        },
        {
          title: "扫黑除恶工作小组",
          url: [
            "http://img1.3lian.com/gif/more/11/201212/cd1d745ed855bef27f47c8aff0786067.jpg",
            "http://img1.3lian.com/gif/more/11/201212/c011f2b2ab1a10d79fe931a786503d03.jpg",
            "http://img1.3lian.com/gif/more/11/201212/cf9d56d05c0cbc1edbf21cf64ad9c341.jpg",
            "http://img1.3lian.com/gif/more/11/201212/cf9d56d05c0cbc1edbf21cf64ad9c341.jpg",
            "http://img1.3lian.com/gif/more/11/201212/e10e8faa201671b5a2e8a6146f80d99e.jpg"
          ],
          message: "原地待命",
          time: "15:15",
          count: 22,
          stick: true,
          disabled: false, //是否禁止滑动
          type: 3 //群组消息
        },
        {
          title: "李彦宏",
          url: [
            "http://img1.3lian.com/gif/more/11/201212/c011f2b2ab1a10d79fe931a786503d03.jpg"
          ],
          message: "抄袭我的吧，我早都做过了",
          time: "12:13",
          count: 1,
          stick: false,
          disabled: false, //是否禁止滑动
          type: 2 //普通用户类型消息
        },
		]
    };
  },
  onLoad() {
	  // #ifdef APP-PLUS
	  /* 隐藏凸起图标 */
	  var icon = plus.nativeObj.View.getViewById("icon");
	  setTimeout(function() {
	  	if(icon){icon.hide();}
	  }, 100);
	  // #endif
  },
  onShow() {
	  this.getConversation();
	  this.onMsgReceive();
  },
  methods: {
	  //会话的消息提示监听
	  onMsgReceive(){
	  	var _this = this;
	  	_this.$appjs.jim.onMsgReceive(function(data) {
	  		uni.vibrateLong();
	  		
	  		const innerAudioContext = uni.createInnerAudioContext();
	  		innerAudioContext.autoplay = true;
	  		innerAudioContext.src = '/static/thebell/dingding.mp3';
	  		innerAudioContext.onPlay(() => {
	  		  console.log('开始播放');
	  		});
	  		innerAudioContext.onError((res) => {
	  		  console.log(res.errMsg);
	  		  console.log(res.errCode);
	  		});
	  		_this.getConversation();
	  	});
	  },
    //获取会话列表
    getConversation(){
    	var _this = this;
    	_this.$appjs.jim.getConversation().onSuccess(function(data) {
			_this.messages = data.conversations;
			_this.messages.forEach(function(v,i){
				_this.messages[i].mtime = _this.timestampToTime(v.mtime)
			})
			console.log(JSON.stringify(_this.messages))
    	})
    },
	// 时间戳转年月日
	timestampToTime(timestamp) {
		// var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
		var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
		var Y = date.getFullYear() + '-';
		var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
		var D = date.getDate() + ' ';
		var h = date.getHours() + ':';
		var m = date.getMinutes() + '';
		var s = date.getSeconds();
		// return Y + M + D + h + m + s;
		return M + D + h + m;
	}
  },
  onNavigationBarButtonTap(e) {
    if (e.index == 0) {
      this.floatingMenuShow = !this.floatingMenuShow;
    }
  }
};
</script>

<style scoped="true" lang="scss" >
.search-box {
  height: 100upx;
  width: 100%;
  background: #4191ea;
  display: flex;
  flex-flow: nowrap;
  .search-bg {
    box-sizing: border-box;
    height: 80upx;
    padding: 0 30upx;
    line-height: 80upx;
    width: 710upx;
    margin: auto;
    background: rgba(255, 255, 255, 1);
    border-radius: 40upx;
    color: #999;
    display: flex;
    flex-flow: nowrap;
    .search {
      flex: 1;
      height: 80upx;
      line-height: 80upx;
    }
    .iconfont {
      margin-left: 15upx;
    }
  }
}
.floating-menus {
  position: fixed;
  top: 0;
  right: 20upx;
  z-index: 10;
  opacity: 0;
  transition: all 0.4s;
  height: 0;
  overflow: hidden;
}
.floating-menus {
  &.show {
    opacity: 1;
    height: auto;
  }
  &.hidden {
    opacity: 0;
    height: 0;
  }
}
</style>
